<template>
    <div>
        <div class = "header">
        <h1 style="margin: 0 auto;">客服管理界面</h1>
    </div>
    <Admin_CS_List :customer-who-work="customerWhoWork"></Admin_CS_List>
        <div class="searchDiv">
            <form  class="search">
                <input v-model="customerServiceId" type="text" placeholder="客服ID" required />
                <button class="custom-button" @click="searchCustomerWork">查询记录</button>
            </form>
        </div>
        <div class="updateSalary">
            <form @submit.prevent="UpdateSalary" class="salary">
                <div class="salary-inputs">
                    <input v-model="salaryUpdate.Customer_Service_ID" type="text" placeholder="客服ID" required />
                    <input v-model="salaryUpdate.SalaryUpdate" type="text" placeholder="数额" required />
                </div>
                <div class="salary-buttons">
                    <button type="submit" class="custom-button">升/降薪</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import Admin_CS_List from '@/components/Admin_CS_List.vue';
import axios from 'axios';
export default {
    data(){
return {
    salaryUpdate:{
        Customer_Service_ID:'',
        SalaryUpdate:'',
        ChangeTime:''
    },
    customerWhoWork:[],
    customerServiceId:''
}
    },
    components: {
        Admin_CS_List
    },
    methods:{
        UpdateSalary(){
            this.salaryUpdate.ChangeTime = new Date().toLocaleString();
            const salaryUpdateValue = this.salaryUpdate.SalaryUpdate.trim();
            const salaryNumber = parseFloat(salaryUpdateValue);
            axios.post('http://localhost:8090/AdminCS/updateSalary',{
            Customer_Service_ID:this.salaryUpdate.Customer_Service_ID,
            SalaryUpdate:salaryNumber,
            ChangeTime:this.salaryUpdate.ChangeTime

            }).then(response=>{
                if(response.data==='success'){
                    alert('修改成功');
                }else{
                    alert('修改失败');
                }
            })
        },

        searchCustomerWork(){
             // 发送请求到后端API，获取用户信息
             axios.get('http://localhost:8090/AdminCs/customerWhoWork', {
                params: {
                    customerServiceId: this.customerServiceId // 假设后端需要名为phone的参数
                }
            })
            .then(response => {
                this.customerWhoWork = response.data
            })
            .catch(error => {
                // 处理请求错误
                console.error(error);
            });
        }
    }
}
</script>

<style scoped>
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}


.header {
    background-color: gainsboro;
    color: white;
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header h1 {
    margin: 0;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.searchDiv, .updateSalary {
    position: fixed;
    bottom: 10px;
    padding: 20px;
    border: 2px solid #ddd;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 5px;
}

.searchDiv {
    left: 10px;
}

.updateSalary {
    right: 10px;
}

.searchDiv form, .updateSalary form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.salary-inputs, .salary-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.salary-inputs input {
    flex: 1;
    height: 40px;
    margin-right: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.salary-inputs input:last-child {
    margin-right: 0;
}

.salary-buttons .custom-button {
    flex: 1;
    margin-right: 10px;
}

.salary-buttons .custom-button:last-child {
    margin-right: 0;
}

.custom-button {
    height: 40px;
    font-size: 14px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-button:hover {
    background-color: #4cae4c;
}

input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

</style>
